<table class="noSpacing" style="width: 100%;height: 100%;">
    <tr>
        <td style="padding: 5px;">
            <input type="button" style="position: fixed;top: 59px;right: 10px;z-index: 1000" value="Full screen"
                onclick="$('#graphName').toggle();$('#headerTR').toggle();"
                >
            <div class="box-wrap" style="display: table;margin-left: auto;margin-right: auto;">
                <div class="box-heading">
                    <h4>
                        <i class="icon-tag"></i> 
                        <span class="glyphicon glyphicon-signal"></span>
                        เปรียบเทียบต้นทุน และรายได้เหนือต้นทุน (ข้อมูลตัวอย่าง)
                    </h4>
                </div>
                <div class="box-inner">
                    <table class="noSpacing"style="width: 100%;height: 100%;">
                        <tr>
                            <td style="vertical-align: middle">
                                <?php
                                    $cost[]=2394;
                                    $cost[]=2735;
                                    $cost[]=2479;
                                    $cost[]=2739;
                                    $cost[]=2360;
                                    $cost[]=2637;
                                    $cost[]=1988;
                                    $cost[]=2862;
                                    $cost[]=2841;

                                    $val[]=863;
                                    $val[]=1065;
                                    $val[]=1196;
                                    $val[]=1611;
                                    $val[]=2064;
                                    $val[]=2113;
                                    $val[]=3599;
                                    $val[]=4250;
                                    $val[]=5088;
                                ?>
                                <div style="border: 1px solid #428bca;margin-left: auto;margin-right: auto;display: table;">
                                    <table class="noSpacing" style="margin-left: 30px;margin-right: 30px;">
                                        <tr>
                                            <?php
                                                for($i=0;$val[$i];$i++){
                                                    $height=$val[$i]/14;
                                                    $heightCost=$cost[$i]/14;
                                                    $heightPercent=($val[$i]/$cost[$i])*150;
                                                    ?>
                                            <td style="vertical-align: bottom;text-align: center;font-size: 60%;padding: 5px 0px 5px 5px;">
                                                <div 
                                                    style="
                                                        position: relative;
                                                        background-color: #F00;
                                                        width: 30px;
                                                        height: <?=$heightCost?>px;
                                                        margin-left: auto;
                                                        margin-right: auto;
                                                    ">
                                                    <div style="
                                                        position: absolute;
                                                        color: #fff;
                                                        top: 25px;
                                                        left: -15px;
                                                        width: 60px;
                                                        text-align: right;
                                                        -ms-transform: rotate(-90deg); /* IE 9 */
                                                        -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
                                                        transform: rotate(-90deg);
                                                    "><?=number_format($cost[$i]);?></div>
                                                </div>
                                            </td>
                                            <td style="vertical-align: bottom;text-align: center;font-size: 60%;padding: 5px 0px 5px 0px;">
                                                <div 
                                                    style="
                                                        position: relative;
                                                        background-color: #428bca;
                                                        width: 30px;
                                                        height: <?=$height?>px;
                                                        margin-left: auto;
                                                        margin-right: auto;
                                                    ">
                                                    <div style="
                                                        position: absolute;
                                                        color: #fff;
                                                        top: 25px;
                                                        left: -15px;
                                                        width: 60px;
                                                        text-align: right;
                                                        -ms-transform: rotate(-90deg); /* IE 9 */
                                                        -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
                                                        transform: rotate(-90deg);
                                                    "><?=  number_format($val[$i])?></div>
                                                </div>
                                            </td>
                                            <td style="vertical-align: bottom;text-align: center;font-size: 60%;padding: 5px 5px 5px 0px;">
                                                <div 
                                                    style="
                                                        position: relative;
                                                        background-color: #0f0;
                                                        width: 30px;
                                                        height: <?=$heightPercent?>px;
                                                        margin-left: auto;
                                                        margin-right: auto;
                                                    ">
                                                    <div style="
                                                        position: absolute;
                                                        color: #006200;
                                                        top: 20px;
                                                        left: -15px;
                                                        width: 60px;
                                                        font-weight: bold;
                                                        -ms-transform: rotate(-90deg); /* IE 9 */
                                                        -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
                                                        transform: rotate(-90deg);
                                                    "><?=  number_format((($val[$i]/$cost[$i])/100)*10000,2)?>%</div>
                                                </div>
                                            </td>
                                                        <?php
                                                }
                                            ?>
                                        </tr>
                                        <tr>
                                            <?php
                                                for($i=0;$val[$i];$i++){
                                                    ?>
                                            <td colspan="3" style="vertical-align: bottom;text-align: center;font-size: 80%;padding: 5px;">
                                                <?=$i+1?>
                                            </td>
                                                        <?php
                                                }
                                            ?>
                                        </tr>
                                        <tr>
                                            <td colspan="<?=count($val)*3?>" style="text-align: center;font-size: 80%;padding-bottom: 5px;">
                                                รายที่<br>
                                                <div style="float: right;margin-right: 20px;">
                                                    <div style="height: 25px;width: 25px;background-color: #0f0;float: left;margin-right: 5px;"></div> % ผลกำไร
                                                </div>
                                                <div style="float: right;margin-right: 20px;">
                                                    <div style="height: 25px;width: 25px;background-color: #428bca;float: left;margin-right: 5px;"></div> รายได้เหนือต้นทุน (บาท)
                                                </div>
                                                <div style="float: right;margin-right: 20px;">
                                                    <div style="height: 25px;width: 25px;background-color: #f00;float: left;margin-right: 5px;"></div> ต้นทุน (บาท)
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div
        </td>
    </tr>
</table>